<template>
  <div class="container">
    <el-card class="directorys-contatiner">
      <!-- 搜索栏 -->
      <el-row>
        <el-col :span="16">
          <el-form size="small" :inline="true" ref="formSearch" class="demo-form-inline">
            <el-form-item label="目录名称" style="margin-right: 50px">
              <el-input v-model="page.directoryName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select placeholder="请选择" v-model="page.state">
                <el-option label="启用" :value="1"></el-option>
                <el-option label="禁用" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="searchList">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" justify="end">
          <el-button
            type="text"
            size="small"
            icon="el-icon-back"
            @click="$router.push('/subjects/list')"
            v-if="subjectID"
            >返回学科</el-button
          >
          <el-button type="success" icon="el-icon-edit" @click="addDirectory"
          size="small"
            >新增目录</el-button
          >
          </el-row>
        </el-col>
      </el-row>
      <!-- 提示 -->
      <el-alert type="info" show-icon>
        <span slot="title">数据一共{{ counts }}条</span>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="list" class="table" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column
          prop="directoryName"
          label="目录名称"
        ></el-table-column>
        <el-table-column prop="creator" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="{ row }">
            <span>{{ row.addDate | formateDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="{ row }">
            <span>{{ row.state === 1 ? '已启用' : '已禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="handlerStateClick(row)"
              >{{ row.state === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button
              type="text"
              size="small"
              :disabled="row.state === 1"
              @click="editDirectory(row)"
              >修改
            </el-button>
            <el-button
              type="text"
              size="small"
              :disabled="row.state === 1"
              @click="delDirectory(row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end" align="middle">
        <el-pagination
          background
          :current-page="page.page"
          :page-sizes="[10, 15, 20, 50]"
          :page-size="page.size"
          layout=" prev, pager, next, sizes, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>
      <!-- 新增弹框 -->
      <directorys-add
        ref="addRef"
        :showDialog.sync="showDialog"
        @directorys="directorys"
        :subjectID123="subjectID"
      />
    </el-card>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/directorys.js'
import DirectorysAdd from '../components/directorys-add.vue'
export default {
  name: 'directorys',
  components: {
    DirectorysAdd
  },
  data () {
    return {
      directoryName: '',
      subjectID: this.$route.query.id, // 学科传过来的Id
      subjectForm: {},
      showDialog: false,
      list: [],
      counts: 0,
      page: {
        page: 1, // 当前页码
        // pages: 0, // 总页数
        pagesize: 0 // 页大小
        // total: 0, // 总记录数
        // subjectID: '',
        // directoryName: '',
        // state: ''
      }
    }
  },
  computed: {
  },
  created () {
    this.directorys()
  },
  methods: {
    // 目录列表
    async directorys () {
      if (this.subjectID) {
        this.page.subjectID = this.subjectID
      }
      try {
        const { data } = await list(this.page)
        this.list = data.items
        this.counts = data.counts
      } catch (error) {
        console.log(error)
      }
    },
    // 新增目录
    addDirectory () {
      this.showDialog = true
    },
    // 改变状态
    async handlerStateClick (row) {
      const data = {
        id: row.id,
        state: row.state === 1 ? '0' : '1'
      }
      try {
        await changeState(data)
        await this.directorys()
        this.$message.success('操作成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 删除数据
    async delDirectory (row) {
      try {
        await remove(row)
        await this.directorys()
        this.$message.success('操作成功')
      } catch (error) {

      }
    },
    // 修改数据
    editDirectory (row) {
      this.showDialog = true
      this.$refs.addRef.showDetail(row)
    },
    // 搜索
    searchList () {
      // this.page.directoryName = this.directoryName
      this.directorys()
    },
    // 清除
    async clear () {
      this.page.state = ''
      this.page.directoryName = ''
      // this.$delete(this.page, 'state')
      // this.$delete(this.page, 'directoryName')
      delete (this.page.state)
      delete (this.page.directoryName)
      this.directorys()
    },
    // current-change page.page 改变时会触发 当前页
    handleCurrentChange (val) {
      this.page.page = val
      this.directorys()
    },
    // size-change pageSize 改变时会触发每页条数
    handleSizeChange (val) {
      this.page.pagesize = val
      this.directorys()
    }
  }

}
</script>

<style scoped>
.directorys-contatiner {
  margin: 10px;
  padding: 20px;
}
.table {
  margin: 20px 0;
}
</style>
